import * as d3 from "d3";
import Weather, { weathers } from "../../domains/weather";
import { useEffect, useRef } from "react";

const ScatterPlot = () => {
  const wrapper = useRef(null);
  const bounds = useRef(null);
  const xAxis = useRef(null);
  const yAxis = useRef(null);

  const width = d3.min([window.innerWidth * 0.9, window.innerHeight * 0.9]);
  const dimensions = {
    width: width!,
    height: width!,
    margins: {
      top: 10,
      right: 10,
      bottom: 50,
      left: 50,
    },
    boundedWidth: 0,
    boundedHeight: 0,
  };
  dimensions.boundedWidth =
    dimensions.width - dimensions.margins.left - dimensions.margins.right;
  dimensions.boundedHeight =
    dimensions.height - dimensions.margins.top - dimensions.margins.bottom;

  const xAccessor = (weather: Weather) => weather.dewPoint;
  const yAccessor = (weather: Weather) => weather.humidity;
  const colorAccessor = (weather: Weather) => weather.cloudCover;

  const xDomain = d3.extent(weathers, xAccessor) as [number, number];
  const xScale = d3
    .scaleLinear()
    .domain(xDomain)
    .range([0, dimensions.boundedWidth])
    .nice();

  const yDomain = d3.extent(weathers, yAccessor) as [number, number];
  const yScale = d3
    .scaleLinear()
    .domain(yDomain)
    .range([dimensions.boundedHeight, 0])
    .nice();

  const colorDomain = d3.extent(weathers, colorAccessor) as [number, number];
  const colorScale = d3
    .scaleLinear<string>()
    .domain(colorDomain) // Find the min and max values
    .range(["skyblue", "darkslategrey"]);

  useEffect(
    () => void d3.select(xAxis.current).call(d3.axisBottom(xScale)),
    [xAxis, xScale]
  );
  useEffect(
    () => void d3.select(yAxis.current).call(d3.axisLeft(yScale).ticks(4)),
    [yAxis, yScale]
  );

  return (
    <div>
      <svg ref={wrapper} width={dimensions.width} height={dimensions.height}>
        <g
          ref={bounds}
          transform={`translate(${dimensions.margins.left},${dimensions.margins.top})`}
        >
          <g ref={xAxis} transform={`translate(0,${dimensions.boundedHeight})`}>
            <text
              fill="black"
              fontSize={15}
              x={dimensions.boundedWidth / 2}
              y={dimensions.margins.bottom - 10}
              textAnchor="middle"
            >
              Dew point (&deg;F)
            </text>
          </g>
          <g ref={yAxis}>
            <text
              fontSize={15}
              fill="black"
              x={dimensions.boundedHeight / 2}
              y={dimensions.margins.left - 10}
              transform={`rotate(90)`}
              textAnchor="middle"
            >
              Relative humidity
            </text>
          </g>
          <g fill="white" stroke="currentColor" strokeWidth="1.5">
            {weathers.map((d, i) => (
              <circle
                key={i}
                fill={colorScale(colorAccessor(d))}
                cx={xScale(xAccessor(d)!)}
                cy={yScale(yAccessor(d))}
                r="5"
                onClick={() => {
                  console.log(xAccessor(d) + " " + yAccessor(d));
                }}
              />
            ))}
          </g>
        </g>
      </svg>
    </div>
  );
};

export default ScatterPlot;
